为什么要导入外部模型?

  • 在上一节中,我们了解到,使用THREE.js创建常见几何图形十分方便。
  • 但对于人或动物这样的复杂模型使用简单几何体的组合就非常麻烦。

支持格式

Three.js有一系列导入外部文件的辅助函数,是在three.js之外的,使用前需要下载,在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。

目前,支持的模型格式有:

  • *.obj(需导入OBJLoader.js)
  • *.obj, *.mtl(导入MTLLoader.js 与 OBJMTLLoader.js)
  • *.dae
  • *.ctm
  • *.ply
  • *.stl
  • *.wrl
  • *.vtk

无材质的模型

需导入OBJLoader.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 创建Loader
var loader = new THREE.OBJLoader();

// 两个参数,第一个表示模型路径,第二个是完成导入后的回调函数
loader.load('../lib/***.obj', function(obj){
mesh = obj;//储存到全局变量中
scene.add(obj);
});

// 默认情况下,只有正面的面片被绘制,而如果需要双面绘制则需要:
loader.load('../lib/***.obj', function(obj){
obj.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.side = THREE.DoubleSide;
}
});
mesh = obj;
scene.add(obj);
});

有材质的模型

  1. 在代码中导入模型后设置材质
1
2
3
4
5
6
7
8
9
10
11
12
loader.load('../lib/***.obj', function(obj){
obj.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material = new THREE.MeshLambertMaterial({
color: 0xffff00,
side: THREE.DoubleSide
});
}
});
mesh = obj;
scene.add(obj);
});
  1. 在建模软件中导出材质信息

    需导入MTLLoader.js 与 OBJMTLLoader.js。

1
2
3
4
5
6
7
8
9
10
11
12
// 创建Loader 
var loader = new THREE.OBJMTLLoader();

// 监听loader的load事件
loader.addEventListener('load', function(event){
var obj = event.content;
mesh = obj;
scene.add(obj);
});

// 加载模型
loader.load('../lib/***.obj', '../lib/***.mtl');

补充:在r78版本中,删除了OBJMTLLoader.js库,使用OBJLoader.js和MTLLoader.js一起使用来代替它

1
2
3
4
5
6
7
8
9
10
11
12
var mtlLoader = new THREE.MTLLoader();

mtlLoader.load('*.mtl', function(materials) {
materials.preload(); //预加载
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('*.obj', function(object) {
object.position.y = -300; // 这里调整模型位置
mesh = object; // 赋值给全局变量
scene.add(object);
});
});